<template>
  <div id="" class="">
      <!-- <router-view/> -->
    <nav class="position-f">
        <ul class="c82 flex-col bgfff border-t font-12">
            <router-link tag="li" to="/index" class="box-center box1" :class="{active:index}">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </router-link>
            <router-link tag="li" to="/shop_index" class="box-center box1" :class="{active:shop}">
                <i class="iconfont icon-shangjia"></i>
                <p>经纪人之家</p>
            </router-link>
            <router-link tag="li" to="/my_customer" class="box-center box1" :class="{active:customer}">
                <i class="iconfont icon-kehu"></i>
                <p>客户</p>
            </router-link>
            <router-link tag="li" to="/user" class="box-center box1" :class="{active:user}">
                <i class="iconfont icon-gerenzhongxin"></i>
                <p>我的</p>
            </router-link>
        </ul>
    </nav>

  </div>
</template>

<script>
// import index from './index/index';
export default {
  name: "index_nav",
  data() {
    return {
      index: false,
      shop: false,
      customer: false,
      user: false
    };
  },
  created() {
    let index_nav = this.$store.state.commonStore.index_nav;
    let that = this;
    that.index = false;
    that.shop = false;
    that.customer = false;
    that.user = false;
    // console.log('index_nav====='+index_nav);
    switch (index_nav) {
      case 1:
        that.shop = true;
        break;
      case 2:
        that.customer = true;
        break;
      case 3:
        that.user = true;
        break;
      default:
        that.index = true;
    }
  }
};
</script>

<style scoped lang="scss">
nav {
  bottom: 0;
  left: 0;
  width: 100%;
  li {
    &.active {
      color: #e12825;
    }
    height: 0.5rem;
    i {
      font-size: 0.2rem !important;
    }
    p {
      padding-top: 0.04rem;
    }
  }
}
</style>
